<template>
  <div class="song-list">
    <div class="header-type">
      <ul class="h-type">
        <li class="id">序号</li>
        <li class="song">歌曲</li>
        <li class="artist">歌手</li>
        <li class="album">专辑</li>
        <li class="timer">时长</li>
      </ul>
    </div>
    <div class="song-main">
      <ul class="song-list">
        <li class="song-item" v-for="(item,index) in songList" :key="item.id">
          <div class="id" :class="[item.vip?'id-vip':'']">{{pageIndex+index+1}}</div>
          <div class="song">
            <span>{{ item.name |handleFont }}</span>
          </div>
          <div class="artist">
            <span>{{ item.singer[0].name }}</span>
          </div>
          <div class="album">
            <span>{{ item.album.name |handleFont}}</span>
          </div>
          <div class="timer oper">{{ item.duration }}</div>
          <div v-if="!item.vip" class="bo" @click="currenSong(item)"><i class="el-icon-video-play" :class="playIcon(item)"></i></div>
          <div v-else class="vip" ><i class="el-icon-star-on"></i></div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import {mapMutations,mapGetters,mapActions}from 'vuex'
export default {
  props: {
    songList: {
      type: Array,
      required: true,
    },
    pageIndex:{
      type:[Number,String],
      // required:true
      default:0
    }
  },
  data() {
    return {};
  },
  created() {},
  computed: {
    ...mapGetters(['playList','playIndex','curSongInfo','isPlayed']),
  },
  methods: {
    ...mapMutations(["setPlayList", "setIsPlayed","setPlayIndex"]),
    ...mapActions(['selectPlay']),
    playIcon(item){
      return this.isPlayed&&item.id===this.curSongInfo.id?'el-icon-video-pause':'';
    },
    currenSong(item){ //全局设置播放音乐
    console.log(item)
      if(!this.curSongInfo||item.id!==this.curSongInfo.id){//当播放列表没有歌曲或者与播放列表歌曲不一样时立即播放该音乐
           this.selectPlay({ list: [item] })//立即播放
      }else{
        this.setIsPlayed(!this.isPlayed);
      }
    }
  },
};
</script>
<style lang="less" scoped>
.song-list {
  width: 1200px;
  // min-height: 500px;
  margin: 0 auto;
  // border: 1px solid #ccc;
  .header-type {
    width: 100%;
    height: 50px;
    line-height: 50px;
    //  border: 1px solid #ccc;
    .h-type {
      display: flex;
      border-bottom: 1px solid #ccc;
      li {
        margin: 10px 10px;
        color: #999;
        line-height: 50px;
        //   border: 1px solid #ccc;
        font-weight: 600;
      }
    }
  }
  .id {
    flex: 1;
    text-align: left;
  }
  .id-vip{
    opacity: 0;
  }
  .song {
    flex: 3;
    text-align: left;
  }
  .artist {
    flex: 3;
    text-align: center;
  }
  .album {
    flex: 3;
    text-align: right;
  }
  .timer {
    flex: 3;
    text-align: right;
  }
  .song-main {
    width: 100%;
    margin-top: 40px;
    // margin-bottom: 80px;
    .song-list {
      width: 100%;
      .song-item {
        display: flex;
        position: relative;
        // border: 1px solid #ccc;
        line-height: 50px;
        height: 50px;
        overflow: hidden;
        padding: 0 10px;
        .vip{
          z-index: 3;
          position: absolute;
          color: #F56C6C;
          cursor: pointer;
          font-size: 24px;
          top: 0;
          left: 5px;
        }
        .bo {
          opacity: 0;
          z-index: 10;
          position: absolute;
          color: #999;
          cursor: pointer;
          font-size: 24px;
          top: 0;
          left: 5px;
        }
        span {
          cursor: pointer;
        }
      }
      .song-item:hover {
        background-color: #ebeef5;
        .id {
          opacity: 0;
        }
        .bo {
          opacity: 1;
        }
      }
    }
  }
}
</style>
